<template>
  <div>
    <el-dialog
      title="常规练习设置"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <div v-if="dialogVisible">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="练习名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="试题设置">
            <div
              class="exercise-wrap"
              v-for="(v, idx) in form.subjectRule"
              :key="idx"
            >
              <div class="exercise-title">
                <el-row type="flex" class="row-bg" justify="space-between">
                  <el-col :span="20">
                    <h2>章节 {{ idx + 1 }}</h2>
                  </el-col>
                  <el-col :span="1" v-if="form.subjectRule.length != 1">
                    <el-button
                      type="text"
                      icon="el-icon-close"
                      style="color: red"
                      @click="handleDelChapter(idx)"
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="test-library-select">
                <!-- 选择题库 -->
                <QuestionBankTitleSelect
                  multiple
                  @emit="(m) => (v.bankIds = m)"
                />
              </div>
              <div class="other-set">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <!-- 选择题型 -->
                    <QuestionTypeSelect @emit="(m) => (v.subjectType = m)" />
                  </el-col>
                  <el-col :span="8">
                    <!-- 选择难度 -->
                    <QuestionDifficultySelect
                      @emit="(m) => (v.subjectDifficulty = m)"
                    />
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      v-model="v.subjectNum"
                      placeholder="请选择试题数量"
                    >
                      <el-option label="5题" :value="5"> </el-option>
                      <el-option label="10题" :value="10"> </el-option>
                      <el-option label="20题" :value="20"> </el-option>
                      <el-option label="30题" :value="30"> </el-option>
                      <el-option label="50题" :value="50"> </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleAddChapter"
              size="small"
              v-if="form.subjectRule.length <= 9"
              >添加章节</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >开始练习</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
    QuestionTypeSelect: () =>
      import('@/views/Admin/exam/public/QuestionTypeSelect.vue'),
    QuestionBankTitleSelect: () =>
      import('@/views/Admin/exam/public/QuestionBankTitleSelect.vue'),
    QuestionDifficultySelect: () =>
      import('@/views/Admin/exam/public/QuestionDifficultySelect.vue'),
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        exercisesType: '1', //练习类型：1-常规练习，2-强化练习
        subjectRule: [
          {
            chapter: '',
            bankIds: [],
            subjectDifficulty: '',
            subjectNum: '',
            subjectType: '',
          },
        ],
      },
      rules: {
        name: [{ required: true, message: '请输入练习名称', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.$bus.$on('showDialogRegularExerciseSet', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogRegularExerciseSet')
  },
  methods: {
    //显示弹窗
    init() {
      this.getList()
      this.form = this.$options.data().form
      this.dialogVisible = true
    },
    //查询题库
    async getList() {
      this.dialogVisible = true
    },
    submitForm(form) {
      this.form.subjectRule.forEach((item, idx) => {
        item.chapter = '章节 ' + (idx + 1)
      })
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let res = await this.$store.dispatch('addTestExercisesHis', this.form)
          if (res.data[0].subjectNum == 0) {
            this.warnMsg('没有匹配到习题，请重新设置练习条件')
            return
          }
          this.$bus.$emit('showDialogExercising', res.data[0])
          this.dialogVisible = false
        }
      })
    },
    //新增章节
    handleAddChapter() {
      let obj = {
        chapter: '',
        bankIds: [],
        subjectDifficulty: '',
        subjectNum: '',
        subjectType: '',
      }
      this.form.subjectRule.push(obj)
    },
    //删除章节
    handleDelChapter(idx) {
      this.form.subjectRule.splice(idx, 1)
    },
  },
}
</script>
<style scoped lang="scss">
.exercise-wrap {
  border: 1px solid #eee;
  margin-bottom: 10px;
  .exercise-title {
    h2 {
      text-indent: 1em;
      font-size: 14px;
      font-weight: bold;
    }
    background-color: #f5f5f5;
  }
  .test-library-select {
    margin: 10px;
  }
  .other-set {
    margin: 10px;
  }
}
</style>